<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/12/29
  Time: 9:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	//获取项目名称
	String path = request.getContextPath();
	//获取: 协议://服务器名称:/端口号+ path +"/"
	//http://localhost:8080/StuAndTeacher/  --->main.jsp
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
	<title>Title</title>
	<base href="<%=basePath%>">
	<link rel="stylesheet" href="layui/css/layui.css">
	<script src="layui/layui.js"></script>
	<script src="jquery/jquery-1.8.3.js"></script>
</head>

<body>
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="demo" lay-filter="test"></table>

<script>

	layui.use('table', function () {
		var table = layui.table;
		//第一个实例
		tableResult = table.render({
			elem: '#demo' //获取table标签对象,准备填充数据
			, url: 'ServletFindAllCos' //获取数据的接口(servlet)
			/*,where:{} */  //传额外参数到servlet
			, page: true //开启分页
			, size: "lg" //设置表格大小
			, limit: 5  //每页显示的条数是几条 (默认会向servlet发送 page(1)--第一页 和 limit(10)--显示10条 两个参数)
			, limits: [5, 10, 15, 20, 25] //设置每页显示几条数据
			, toolbar: true  //工具头,开启 删选,导出,打印的根据头(显示在表格的右边)
			, cols: [[ //表头
				{title: '编号', fixed: 'left',align:"center",type:"numbers",width: 100}
				,{field: 'courseName', title: '科目',align:"center"}
				,{field: 'courseCredit', title: '学分',align:"center"}
				,{field: 'courseHours', title: '学时' ,align:"center"}
				,{field: 'courseTeacher', title: '任课老师',align:"center"}
				,{field: 'courseDate', title: '开课时间',align:"center", width: 180 ,templet: "<div>{{layui.util.toDateString(d.courseDate, 'yyyy-MM-dd')}}</div>" }
				,{fixed: 'right', title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
			]]
		});

		// test 是table标签中lay-filter的值,tool是工具条事件名称(layui创建的),
		// obj:当前点击操作的本行标签对象
		table.on('tool(test)', function (obj) {
			var data = obj.data;//获取本行数据

			// alert(data.couName);  值为undefined
			// alert(data.courseName);
			// var trans = data.courseName;
			// var param_val = encodeURIComponent(trans);
			var event = obj.event;//获取本行事件:具体是获取lay-event的值(值就是事件要执行的内容)
			if (event == 'edit') {
				/*layer.msg('开始修改操作');*/
				//将数据放入会话对象中,跳转到HTML页面并获取


				sessionStorage.setItem('courseName',data.courseName);

				var cou = data.courseName;
                console.log(cou)
				location.href="admin/updCourse.html";

			} else if (event == 'del') {
				layer.confirm('确定要删除吗?', function (index) {
					obj.del();//删除对应行（tr）的DOM结构，并更新缓存(页面删除,数据库还在)
					layer.close(index);//关闭弹窗
					$.ajax({
						url: "delCou",
						data: {//写大括号的意义是:参数是多个,然后封装成json格式
							"couName": data.courseName
						},
						contentType: "Application/json",
						success: function () {
							layer.msg('删除成功', {icon: 1}, {time: 2000});
						},
						error: function () {
							layer.msg('连接网络失败，请检查网络设置或联系管理员', {icon: 2}, {time: 2000});
						}
					})
				});
			}




		});


	});


</script>
</body>
</html>
